<!-- 订单管理 -->
<template>
  <div class="outer">
    <h5>订单管理</h5>
    <div class="table">
      <avue-crud
        :data="data"
        :option="option"
        @on-load="getList"
        @selection-change="selectionChange"
        :page.sync="page"
      >
        <template slot="menuLeft" slot-scope="{ size }">
          <el-button
            type="danger"
            icon="el-icon-delete"
            :size="size"
            @click="delSelection()"
            >删除选择</el-button
          >
        </template>
        <template slot-scope="{ type, size, row, index }" slot="menu">
          <el-button
            icon="el-icon-view"
            :size="size"
            :type="type"
            @click="checkInfo(row, index)"
            >查看</el-button
          >
          <el-button
            icon="el-icon-check"
            :size="size"
            :type="type"
            @click="tip(row, index)"
            v-show="row.status == 2"
            >已送货</el-button
          >
          <el-button
            icon="el-icon-delete"
            :size="size"
            :type="type"
            @click="rowDel(row, index)"
            >删除</el-button
          >
        </template>
      </avue-crud>
      <el-dialog title="订单详情" :visible.sync="dialogVisible" width="30%">
        <div class="dialog-main">
          <ul>
            <li v-for="(item, index) in orderInfo" :key="index">
              <p>商品名称：{{ item.name }}</p>
              <p>商品口味：{{ item.coffeeFlavor }}</p>
              <p>商品数量：{{ item.number }}</p>
              <p>商品价格：{{ item.amount }}</p>
            </li>
          </ul>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import { getOrder, delOrder, setOrderStatus, getOrderInfo } from "@/api/api";

export default {
  components: {},
  props: {},
  data() {
    return {
      page: {
        currentPage: 1,
        pageSize: 10,
        total: 10,
      },
      // 表格数据
      data: [],
      selectItem: [],
      // 表格配置
      option: {
        addBtn: false,
        editBtn: false,
        delBtn: false,
        selection: true,
        tip: false,
        column: [
          {
            label: "收货人",
            prop: "consignee",
          },
          {
            label: "地址",
            prop: "address",
          },
          {
            label: "联系方式",
            prop: "phone",
          },
          {
            label: "单价",
            prop: "amount",
          },
          {
            label: "配送方式",
            prop: "payMethod",
            type: "select",
            dicData: [
              {
                label: "自提",
                value: 1,
              },
              {
                label: "商家配送",
                value: 2,
              },
            ],
          },
        ],
      },
      // 对话框打开的地方
      dialogVisible: false,
      orderInfo: [],
    };
  },
  watch: {},
  computed: {},
  methods: {
    // 获取list
    getList() {
      getOrder({
        currentPage: this.page.currentPage,
        pageSize: this.page.pageSize,
      })
        .then((result) => {
          this.page.total = result.data.data.total;
          this.data = result.data.data.rows;
        })
        .catch((err) => {
          this.$message({
            message: "获取失败！",
            type: "error",
          });
          console.log("报错信息", err);
        });
    },

    // 删除
    rowDel(form, index) {
      let idArray = [];
      idArray.push(form.id);
      delOrder(idArray)
        .then((result) => {
          if (result.data.code == 1) {
            this.$message({
              message: "删除成功!",
              type: "success",
            });
            this.getList();
          } else {
            this.$message({
              message: "删除失败!",
              type: "error",
            });
          }
        })
        .catch((err) => {
          this.$message({
            message: "删除失败！",
            type: "error",
          });
          console.log("报错信息", err);
        });
    },
    // 选择
    selectionChange(item) {
      this.selectItem = item;
    },
    // 删除选择
    delSelection() {
      let idArray = [];
      this.selectItem.map((item) => {
        idArray.push(item.id);
      });
      delOrder(idArray)
        .then((result) => {
          if (result.data.code == 1) {
            this.$message({
              message: "删除成功!",
              type: "success",
            });
            this.getList();
          } else {
            this.$message({
              message: "删除失败!",
              type: "error",
            });
          }
        })
        .catch((err) => {
          this.$message({
            message: "删除失败！",
            type: "error",
          });
          console.log("报错信息", err);
        });
    },

    // 送货按钮
    tip(row, index) {
      setOrderStatus({ id: row.id, status: 3 })
        .then((result) => {
          if (result.data.code == 1) {
            this.$message({
              message: "已送货成功！",
              type: "success",
            });
            this.getList();
          }
        })
        .catch((err) => {
          this.$message({
            message: "删除失败！",
            type: "error",
          });
          console.log("报错信息", err);
        });
    },

    // 查看订单详情
    checkInfo(row, index) {
      getOrderInfo(row.id)
        .then((result) => {
          if ((result.data.code = 1)) {
            this.dialogVisible = true;
            this.orderInfo = [];
            this.orderInfo = result.data.data;
          }
        })
        .catch((err) => {
          this.$message({
            message: "获取失败！",
            type: "error",
          });
          console.log("报错信息", err);
        });
    },
  },
  created() {},
  mounted() {
    this.getList();
  },
};
</script>
<style lang="scss" scoped>
.outer {
  padding: 20px;
  h5 {
    margin-bottom: 20px;
  }
  .dialog-main {
    li {
      padding: 20px;
    }
  }
}
</style>